<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript mouseenter and mouseleave Example</title>

<style type="text/css" media=screen>
#div1 {
text-align: left;
border-style: solid;
border-width: 3px;
border-color: #36C;
width: 30%;
margin-left:25%;
margin-right:45%;
min-width: 200px;
height: 300px;
margin-top: 100px;
}
#div2 {
text-align: left;
border-style: solid;
border-width: 3px;
border-color: #36C;
width: 60%;
margin-left:20%;
margin-right:20%;
height: 60%;
}
#span1 {
background-color: #0C0;
border-width: 3px;
}
.info {
margin-top: 20px;
width: 30%;
margin-left:35%;
margin-right:35%;
}
</style>

<script type="text/javascript">
/* IE: attachEvent, Firefox & Chrome: addEventListener */
function _addEventListener(evt, element, fn) {
  if (window.addEventListener) {element.addEventListener(evt, fn, false);}
  else {element.attachEvent('on'+evt, fn);}
}

function _getParentElement(element, id) {
  /* sometimes mouse event return the child element of actual element we need, so we need to check parent element */
  /* Chrome and Firefox use parentNode, while Opera uses offsetParent */
  while(element.parentNode) { 
    if( element.id == id ) {return element;}
    element = element.parentNode;
  }
  while(element.offsetParent) { 
    if( element.id == id ) {return element;}
    element = element.offsetParent;
  }
  return null;
}

function onDiv1MouseOver(evt) {
  if(!evt) {evt = window.event;}
  var target = evt.target || evt.srcElement;

  // check if mouse moves inside div1, if yes, return.
  var div1 = _getParentElement(target, 'div1');
  var relTarg = evt.relatedTarget || evt.fromElement;
  if (_getParentElement(relTarg, 'div1') == div1) return;

  // mouse moves in from outside div1. This is a true 'mouse enter' event
  onDiv1MouseEnter(div1);
}

function onDiv1MouseEnter(element) {
  document.getElementById("info").innerHTML = element.id + ' mouseenter';
}

function onDiv1MouseOut(evt) {
  if(!evt) {evt = window.event;}
  var target = evt.target || evt.srcElement;

  // check if mouse moves inside div1, if yes, return.
  var div1 = _getParentElement(target, 'div1');
  var relTarg = evt.relatedTarget || evt.toElement;
  if (_getParentElement(relTarg, 'div1') == div1) return;

  // mouse moves out from inside div1. This is a true 'mouse leave' event
  onDiv1MouseLeave(div1);
}

function onDiv1MouseLeave(element) {
  document.getElementById("info").innerHTML = element.id + ' mouseleave';
}

function addevt() {
  _addEventListener('mouseover', document.getElementById("div1"), onDiv1MouseOver);
  _addEventListener('mouseout', document.getElementById("div1"), onDiv1MouseOut);
  document.getElementById("info").innerHTML = "div1 onmouseover and onmouseleave event";
}
</script>

</head>
<body onload="addevt()">
 <div id="div1">I am div1. Try to move mouse over me.
  <br /><br />
  <div id="div2">I am div2. Try to move mouse over me.
   <br /><br />
   <span id="span1">I am span1. Try to move mouse over me.</span>
  </div>
 </div>

<div id="info" class="info"></div>

</body>
</html>
